<div nz-row nzType="flex" nzAlign="strecth" nzGutter="16" class="py-md">

  <div nz-col nzSpan="24">
    <nz-card [nzBordered]="false" class="card-top">
      <nz-form-item nz-row nzFlex class="mb0">
        <nz-form-label>站点</nz-form-label>
        <nz-form-control>
          <nz-cascader [ngModel]="[siteSrv.site?.companyId, siteSrv.site?.id]" [nzOptions]="siteSrv.sites | siteOption:'tree'" (ngModelChange)="changeSite($event)"
            [nzAllowClear]="false" class="cascader-width-auto"></nz-cascader>
        </nz-form-control>
      </nz-form-item>
    </nz-card>
  </div>

  <div nz-col class="width-xxl">
    <nz-card [nzTitle]="menuListTitle" [nzBordered]="false" class="card-nopd menu-card height-full mb0">

      <ng-template #menuListTitle>
        <div nz-row nzType="flex" nzJustify="space-between">
          <div nz-col>菜单列表</div>
          <div nz-col class="title-buttons">
            <button nz-button nzSize="small" (click)="shrinkAllMenuFolders()">
              <i class="anticon anticon-shrink"></i>
            </button>
            <button nz-button nzSize="small" (click)="expandAllMenuFolders()">
              <i class="anticon anticon-arrows-alt"></i>
            </button>
          </div>
        </div>
      </ng-template>

      <div class="menu-tree p-md">
        <nz-tree [(ngModel)]="data.menu" [nzShowLine]="true" [nzDraggable]="true" [nzDefaultExpandAll]="true" (nzClick)="selectMenuItem($event)"
          (nzDblClick)="toggleStatusOfMenuFolder($event)">
          <ng-template #nzTreeTemplate let-menu>
            <span draggable class="tree-inner menu-name" [class.active]="menu.isSelected" [title]="menu.origin.i18n | translate">
              <i *ngIf="menu.origin.icon" class="{{menu.origin.icon}}"></i>
              <span>{{menu.origin.i18n | translate}}</span>
            </span>
            <span class="tree-inner expand" [class.hidden]="!menu.isSelected">
              <i *ngIf="!menu.isLeaf" (click)="addSubMenuFolder(menu, $event)" class="anticon anticon-folder-add" title="添加子目录"></i>
              <i *ngIf="!menu.isLeaf && menu.level" (click)="addSubMenuPage(menu, $event)" class="anticon anticon-file-add" title="添加子菜单"></i>
              <nz-popconfirm *ngIf="menu.level" nzTitle="确定要删除该菜单吗？" (nzOnConfirm)="deleteMenuItem(menu)">
                <i nz-popconfirm class="anticon anticon-delete" title="删除菜单"></i>
              </nz-popconfirm>
            </span>
          </ng-template>
        </nz-tree>
      </div>

    </nz-card>
  </div>

  <div nz-col class="flex-1">
    <nz-card nzTitle="菜单明细" [nzBordered]="false" class="card-nopd height-full mb0">

      <form nz-form [formGroup]="validateForm">
        <div class="p-lg">

          <nz-form-item nz-row nzFlex>
            <nz-form-label nzRequired class="label-width">名称</nz-form-label>
            <nz-form-control class="flex-1">
              <input nz-input formControlName="menuName" placeholder="请输入菜单名称" [readonly]="!currentMenuNode?.level">
              <nz-form-explain *ngIf="hasError('menuName')">菜单名称不能为空！</nz-form-explain>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item nz-row nzFlex>
            <nz-form-label nzRequired class="label-width">翻译代码</nz-form-label>
            <nz-form-control class="flex-1">
              <input nz-input formControlName="i18n" placeholder="请输入翻译代码" [readonly]="!currentMenuNode?.level">
              <nz-form-explain *ngIf="hasError('i18n')">翻译代码不能为空！</nz-form-explain>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf="currentMenuNode?.level === 2" nz-row nzFlex>
            <nz-form-label class="label-width">图标</nz-form-label>
            <nz-form-control class="flex-1">
              <input nz-input formControlName="icon" placeholder="请输入图标类名" [readonly]="!currentMenuNode?.level">
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf="currentMenuNode?.isLeaf" nz-row nzFlex>
            <nz-form-label class="label-width">链接</nz-form-label>
            <nz-form-control class="flex-1">
              <input nz-input formControlName="link" placeholder="请输入链接地址">
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf="currentMenuNode?.isLeaf" nz-row nzFlex>
            <nz-form-label class="label-width">是否外链</nz-form-label>
            <nz-form-control class="flex-1">
              <nz-radio-group formControlName="isExternal" (ngModelChange)="changeExternal()">
                <label nz-radio [nzValue]="true">是</label>
                <label nz-radio [nzValue]="false">否</label>
              </nz-radio-group>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf="currentMenuNode?.isLeaf" nz-row nzFlex>
            <nz-form-label class="label-width">打开目标</nz-form-label>
            <nz-form-control class="flex-1">
              <nz-select formControlName="target" nzPlaceHolder="请选择" [nzDisabled]="!validateForm.get('isExternal').value">
                <nz-option nzLabel="当前窗口打开" nzValue="_self"></nz-option>
                <nz-option nzLabel="新窗口打开" nzValue="_blank"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf="currentMenuNode?.isLeaf" nz-row nzFlex>
            <nz-form-label class="label-width">隐藏</nz-form-label>
            <nz-form-control class="flex-1">
              <nz-radio-group formControlName="isHide" [nzDisabled]="validateForm.get('isExternal').value">
                <label nz-radio [nzValue]="true">是</label>
                <label nz-radio [nzValue]="false">否</label>
              </nz-radio-group>
            </nz-form-control>
          </nz-form-item>

        </div>
      </form>

    </nz-card>
  </div>

</div>

<footer-toolbar>
  <button nz-button nzType="primary" (click)="submit()">保存</button>
</footer-toolbar>